<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:aui="http://liferay.com/faces/aui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:bridge="http://liferay.com/faces/bridge"
	xmlns:p="http://primefaces.org/ui"
	xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
	xmlns:ui="http://java.sun.com/jsf/facelets">


	<h:form id="appointmentForm" styleClass="appointmentForm" >
		<f:event listener="#{appointmentFormController.loadData}" type="javax.faces.event.PreRenderComponentEvent" />
		<p:messages id="messages" globalOnly="true"/>
		<h:panelGroup id="commonInformation" styleClass="formPanel">
			<p:outputLabel value="Allgemeine Informationen" styleClass="formTitle" />
			<h:panelGrid columns="4" styleClass="commonInformation"
				columnClasses="label-first, value-first, label-second, value-second">
				<p:outputLabel value="Raport-Nr.:" for="reportNr" />
				<p:inputText id="reportNr" value="#{appointmentFormController.appointment.reportNumber}"
					disabled="true" styleClass="appointmentFormInput" />

				<p:outputLabel value="Zuständig:" for="responsibility" />
				<p:selectOneMenu id="responsibility"
					value="#{appointmentFormController.selectedUserId}"
					styleClass="electroOffice-dropdown appointmentFormInput">
					<f:selectItems value="#{appointmentFormController.userList}" />
				</p:selectOneMenu>

				<p:outputLabel value="Projekt-Nr.:" for="projectNr" />
				<h:panelGroup styleClass="projectNrPanel">
					<p:inputText id="projectNr"
						value="#{appointmentFormController.appointment.projectNumber}"
						styleClass="appointmentFormInput" />
					<h:outputLink id="projectLink" value="javascript:void(0)"
						styleClass="lupeLink projectLink"
						onclick="PF('projectDlg').show();">
						<h:graphicImage alt="Lupe/Suche" value="/img/loupe.png" />
					</h:outputLink>
				</h:panelGroup>

				<p:outputLabel value="Termin:" for="appointmentDate" />
				<p:calendar id="appointmentDate"
					value="#{appointmentFormController.appointment.appointmentDate}" required="true"
					navigator="true" showOn="button" disabledWeekends="true"
					timeZone="Europe/Zurich" converter="LocalDateTimeConverter"
					minHour="7" maxHour="20" pattern="dd.MM.yyyy HH:mm"
					styleClass="appointmentFormInput" />

				<p:outputLabel value="Erfassungsdatum:" for="createdDate" />
				<p:inputText id="createdDate"
					value="#{appointmentFormController.appointment.registrationDate}"
					styleClass="appointmentFormInput" />

				<p:outputLabel value="Tel. für Rückfragen:" for="phoneForCallback" />
				<p:inputText id="phoneForCallback"
					value="#{appointmentFormController.appointment.phoneCustomer}" required="true"
					styleClass="appointmentFormInput" />

				<p:outputLabel value="Auftraggeber:" for="employer" />
				<p:inputText id="employer"
					value="#{appointmentFormController.appointment.employer}" required="true"
					styleClass="appointmentFormInput" />

				<p:outputLabel value="Betreff:" for="subject" />
				<p:inputText id="subject"
					value="#{appointmentFormController.appointment.subject}" required="true"
					styleClass="appointmentFormInput" />
			</h:panelGrid>
			<ui:include src="common/projectDialog.xhtml" />
		</h:panelGroup>
		<h:panelGroup id="addressInformation"
			styleClass="formPanel addressPanel">
			<p:outputLabel value="Adressen" styleClass="formTitle" />
			<h:panelGrid columns="3" styleClass="addressInformation"
				columnClasses="address-field, address-field, address-field">
				<h:panelGroup styleClass="customerAddress">
					<h:panelGroup styleClass="customer-address">
						<h:panelGroup styleClass="titleAndLink">
							<p:outputLabel value="Kunde" styleClass="address-field-title" />
							<h:outputLink id="customerAddressLink" value="javascript:void(0)"
								styleClass="lupeLink addressLink"
								onclick="PF('customerDlg').show();">
								<h:graphicImage alt="Lupe/Suche" value="/img/loupe.png" />
							</h:outputLink>
						</h:panelGroup>
						<h:panelGroup styleClass="address-field-fields">
							<p:outputLabel value="#{appointmentFormController.customerAddress.salutation}"
								styleClass="address-value"
								rendered="#{!empty appointmentFormController.customerAddress.salutation}" />
							<p:outputLabel
								value="#{appointmentFormController.customerAddress.lastname} #{appointmentFormController.customerAddress.firstname}"
								rendered="#{!empty appointmentFormController.customerAddress.firstname or !empty appointmentFormController.customerAddress.lastname}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.customerAddress.street}"
								rendered="#{!empty appointmentFormController.customerAddress.street}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.customerAddress.plz}"
								rendered="#{!empty appointmentFormController.customerAddress.plz}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.customerAddress.city}"
								rendered="#{!empty appointmentFormController.customerAddress.city}"
								styleClass="address-value" />
							<p:outputLabel
								value="P: #{appointmentFormController.customerAddress.telPrivate}"
								rendered="#{!empty appointmentFormController.customerAddress.telPrivate}"
								styleClass="address-value" />
							<p:outputLabel
								value="G: #{appointmentFormController.customerAddress.telBusiness}"
								rendered="#{!empty appointmentFormController.customerAddress.telBusiness}"
								styleClass="address-value" />
							<p:outputLabel value="M: #{appointmentFormController.customerAddress.mobile}"
								rendered="#{!empty appointmentFormController.customerAddress.mobile}"
								styleClass="address-value" />
							<p:outputLabel
								value="EMail: #{appointmentFormController.customerAddress.email}"
								rendered="#{!empty appointmentFormController.customerAddress.email}"
								styleClass="address-value" />
						</h:panelGroup>
					</h:panelGroup>
				</h:panelGroup>

				<h:panelGroup styleClass="objectAddress">
					<h:panelGroup styleClass="object-address">
						<h:panelGroup styleClass="titleAndLink">
							<p:outputLabel value="Objekt" styleClass="address-field-title" />
							<h:outputLink id="objectAddressLink" value="javascript:void(0)"
								styleClass="lupeLink addressLink"
								onclick="PF('customerDlg').show();">
								<h:graphicImage alt="Lupe/Suche" value="/img/loupe.png" />
							</h:outputLink>
						</h:panelGroup>
						<h:panelGroup styleClass="address-field-fields">
							<p:outputLabel value="#{appointmentFormController.objectAddress.salutation}"
								rendered="#{!empty appointmentFormController.objectAddress.salutation}"
								styleClass="address-value" />
							<p:outputLabel
								value="#{appointmentFormController.objectAddress.lastname} #{appointmentFormController.objectAddress.firstname}"
								rendered="#{!empty appointmentFormController.objectAddress.firstname or !empty appointmentFormController.objectAddress.lastname}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.objectAddress.street}"
								rendered="#{!empty appointmentFormController.objectAddress.street}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.objectAddress.plz}"
								rendered="#{!empty appointmentFormController.objectAddress.plz}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.objectAddress.city}"
								rendered="#{!empty appointmentFormController.objectAddress.city}"
								styleClass="address-value" />
							<p:outputLabel value="P: #{appointmentFormController.objectAddress.telPrivate}"
								rendered="#{!empty appointmentFormController.objectAddress.telPrivate}"
								styleClass="address-value" />
							<p:outputLabel
								value="G: #{appointmentFormController.objectAddress.telBusiness}"
								rendered="#{!empty appointmentFormController.objectAddress.telBusiness}"
								styleClass="address-value" />
							<p:outputLabel value="M: #{appointmentFormController.objectAddress.mobile}"
								rendered="#{!empty appointmentFormController.objectAddress.mobile}"
								styleClass="address-value" />
							<p:outputLabel value="EMail: #{objectAddress.email}"
								rendered="#{!empty appointmentFormController.objectAddress.email}"
								styleClass="address-value" />
						</h:panelGroup>
					</h:panelGroup>
				</h:panelGroup>

				<h:panelGroup styleClass="invoiceAddress">
					<h:panelGroup styleClass="invoice-address">
						<h:panelGroup styleClass="titleAndLink">
							<p:outputLabel value="Rechnung" styleClass="address-field-title" />
							<h:outputLink id="invoiceAddressLink" value="javascript:void(0)"
								styleClass="lupeLink addressLink"
								onclick="PF('customerDlg').show();">
								<h:graphicImage alt="Lupe/Suche" value="/img/loupe.png" />
							</h:outputLink>
						</h:panelGroup>
						<h:panelGroup styleClass="address-field-fields">
							<p:outputLabel value="#{appointmentFormController.invoiceAddress.salutation}"
								rendered="#{!empty appointmentFormController.invoiceAddress.salutation}"
								styleClass="address-value" />
							<p:outputLabel
								value="#{appointmentFormController.invoiceAddress.lastname} #{appointmentFormController.invoiceAddress.firstname}"
								rendered="#{!empty appointmentFormController.invoiceAddress.firstname or !empty appointmentFormController.invoiceAddress.lastname}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.invoiceAddress.street}"
								rendered="#{!empty appointmentFormController.invoiceAddress.street}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.invoiceAddress.plz}"
								rendered="#{!empty appointmentFormController.invoiceAddress.plz}"
								styleClass="address-value" />
							<p:outputLabel value="#{appointmentFormController.invoiceAddress.city}"
								rendered="#{!empty appointmentFormController.invoiceAddress.city}"
								styleClass="address-value" />
							<p:outputLabel value="P: #{invoiceAddress.telPrivate}"
								rendered="#{!empty appointmentFormController.invoiceAddress.telPrivate}"
								styleClass="address-value" />
							<p:outputLabel value="G: #{invoiceAddress.telBusiness}"
								rendered="#{!empty appointmentFormController.invoiceAddress.telBusiness}"
								styleClass="address-value" />
							<p:outputLabel value="M: #{invoiceAddress.mobile}"
								rendered="#{!empty appointmentFormController.invoiceAddress.mobile}"
								styleClass="address-value" />
							<p:outputLabel value="EMail: #{invoiceAddress.email}"
								rendered="#{!empty appointmentFormController.invoiceAddress.email}"
								styleClass="address-value" />
						</h:panelGroup>
					</h:panelGroup>
				</h:panelGroup>
				<ui:include src="common/customerDialog.xhtml" />
			</h:panelGrid>
		</h:panelGroup>
		<h:panelGroup id="jobDescription"
			styleClass="formPanel jobDescription">
			<p:outputLabel value="Auftragsbeschrieb *" styleClass="formTitle" />
			<p:dataGrid var="identifier" value="#{appointmentFormController.jobIdentifiers}"
				columns="5" styleClass="paddingBorder">
				<p:selectBooleanCheckbox itemLabel="#{identifier.item.name}"
					value="#{identifier.selected}" styleClass="tableColoumn1" />
			</p:dataGrid>
			<p:inputTextarea rows="10" cols="150"
				value="#{appointmentFormController.appointment.description}" maxlength="600"
				required="true" />
		</h:panelGroup>
		<h:panelGroup styleClass="buttonsSaveDelete">
			<p:commandButton value="Speichern" 
							actionListener="#{appointmentFormController.saveAppointment}"  
							styleClass="electroOffice-button save-button" 
							ajax="false"
							update="appointmentForm" />
		</h:panelGroup>
	</h:form>
</f:view>